<script setup lang="ts">
import { useRoute, RouterLink } from 'vue-router';

const nav = [
    {
        id: 1,
        text: '智能检测',
        img: '/src/assets/images/zhineng.png',
        activeImg: '/src/assets/images/zhineng_hor.png',
        isOrange: false,
        url: '/home'
    },
    {
        id: 2,
        text: '就业态势',
        img: '/src/assets/images/jiuye.png',
        activeImg: '/src/assets/images/jiuye_hor.png',
        isOrange: false,
        url: '/employment'
    },
    {
        id: 3,
        text: '安防管理',
        img: '/src/assets/images/anfang.png',
        activeImg: '/src/assets/images/anfang_hor.png',
        isOrange: false,
        url: '/security'
    },
    {
        id: 4,
        text: '设备运维',
        img: '/src/assets/images/shebei.png',
        activeImg: '/src/assets/images/shebei_hor.png',
        isOrange: false,
        url: '/equipment'
    }
]

const { path } = useRoute()
let obj = nav.find(item => item.url === path)
obj.isOrange = true
</script>

<template>
    <div class="footer">
        <RouterLink v-for="item in nav" :key="item.id" :to="item.url">
            <img v-if="!item.isOrange" :src="item.img" alt="">
            <img v-if="item.isOrange" :src="item.activeImg" alt="">
            <p>{{ item.text }}</p>
        </RouterLink>
    </div>
</template>

<style scoped lang="scss">
.footer {
    background-image: url('../../assets/images/navs.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    a{
        margin: 0 6px;
           color: #fff;
           text-decoration: none;
        img{
            width: 40px;
            height: 40px;
        }
        p{
            padding: 0;
            margin: 0;
            color: #fff;
            text-align: center;
            font-style: 14px;
        }
    }
}
</style>
